<!-- 配置大屏的整个界面 -->
<template>
  <div class="page" style="width: 100% !important;height: 100vh !important;" v-loading="Loading"
    element-loading-text="正在保存中,请稍等..." element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- 中间预览部分 -->
    <div class="left">
      <!-- 默认模板显示的内容 -->
      <!-- 最上面 标题部分 -->
      <div class="zero high_light " :style="{
        'background-image': 'url(' + allData.zero.title_img + ')',
        'color': allData.zero.title_color,
        'background-color': allData.zero.back_color,
        'border-radius': allData.zero.border_radius + 'px',
      }" @click="highLight(0)">
        <span class="titleName"
          :style="{ 'font-size': allData.zero.title_size + 'rem', 'letter-spacing': allData.zero.title_spacing + 'rem' }">{{
            allData.zero.title_name
          }} </span>
      </div>
      <!-- 第一部分 -->
      <div class="one high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px', }"
        @click="highLight(1)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.one.content_title }}</div>
          </div>
          <!-- {{ border_style }} -->
          <div class="content_data">
            <cAssembly1 :cId1="allData.one" ref="childRef1" style="width: 100% !important;height: 100% !important; ">
            </cAssembly1>
          </div>
        </component>
      </div>
      <!-- 第二部分 -->
      <div class="two high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(2)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{
                allData.two.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly2 :cId2="allData.two" ref="childRef2" style="width: 100% !important;height: 100% !important;">
            </cAssembly2>
          </div>
        </component>
      </div>
      <!-- 第三部分 -->
      <div class="three high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(3)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.three.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly3 :cId3="allData.three" ref="childRef3" style="width: 100% !important;height: 100% !important;">
            </cAssembly3>
          </div>
        </component>
      </div>
      <!-- 第四部分 -->
      <div class="four high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(4)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.four.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly4 :cId4="allData.four" ref="childRef4" style="width: 100% !important;height: 100% !important;">
            </cAssembly4>
          </div>
        </component>
      </div>
      <!-- 第五部分 -->
      <div class="five high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(5)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.five.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly5 :cId5="allData.five" ref="childRef5" style="width: 100% !important;height: 100% !important;">
            </cAssembly5>
          </div>
        </component>
      </div>
      <!-- 第六部分 -->
      <div class="six high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(6)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.six.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly6 :cId6="allData.six" ref="childRef6" style="width: 100% !important;height: 100% !important;">
            </cAssembly6>
          </div>
        </component>
      </div>
      <!-- 第七部分 -->
      <div class="seven high_light"
        :style="{ 'background-color': allData.zero.back_color, 'border-radius': allData.zero.border_radius + 'px' }"
        @click="highLight(7)">
        <component :is="allData.zero.border_style" :dur="allData.zero.dur">
          <div class="every_content_title">
            <div :style="{ 'background-color': allData.zero.in_color }"></div>
            <div
              :style="{ 'color': allData.zero.small_title_color, 'font-size': allData.zero.small_title_size + 'rem', 'letter-spacing': allData.zero.small_title_spacing + 'rem' }">
              {{ allData.seven.content_title }}</div>
          </div>
          <div class="content_data">
            <cAssembly7 :cId7="allData.seven" ref="childRef7" style="width: 100% !important;height: 100% !important;">
            </cAssembly7>
          </div>
        </component>
      </div>
      <!-- 第八部分中间的部分 -->
      <div class="eight high_light" id="mapBox" @click="highLight(8)">

        <!-- {{ module.columnar }} <br>{{ configIndex }} -->
      </div>
    </div>
    <!-- 右侧的配置的部分 -->
    <div class="right" style="position: relative;">
      <div class="btn_group">
        <el-button size="mini" type="primary" @click="goBack">返回</el-button>
        <el-button size="mini" type="success" @click="previewConfig">预览</el-button>
        <el-button size="mini" type="success" @click="saveConfig">保存</el-button>
      </div>

      <pConfig v-if="show_group" @changeTitle="changeTitle" @changeType="changeType" :module="module" ref="rightRef"
        style="width: 100% !important;height: 100% !important;padding-top: 20px;">
      </pConfig>
      <!-- 预览的弹框 -->
      <el-dialog class="preview_visible" :visible="previewVisible" :width="'100%'" :height="'100%'" append-to-body
        :show-close="close">
        <div>
          <!-- 预览 -->
          <previewV :allDataP="allDataP" ref="childPre" @closeVisible="closeVisible"></previewV>
        </div>
      </el-dialog>


    </div>
  </div>
</template>
<script>
import cAssembly1 from '../templates/ChartAssembly1.vue';
import cAssembly2 from '../templates/ChartAssembly2.vue';
import cAssembly3 from '../templates/ChartAssembly3.vue';
import cAssembly4 from '../templates/ChartAssembly4.vue';
import cAssembly5 from '../templates/ChartAssembly5.vue';
import cAssembly6 from '../templates/ChartAssembly6.vue';
import cAssembly7 from '../templates/ChartAssembly7.vue';
import pConfig from '../templates/PublicConfig.vue';
import previewV from './largeScreenConfigPreview.vue';
export default {
  name: "configLarge",
  components: {
    pConfig,
    previewV,
    cAssembly1,
    cAssembly2,
    cAssembly3,
    cAssembly4,
    cAssembly5,
    cAssembly6,
    cAssembly7,
  },
  data() {
    return {
      win: window,
      previewVisible: false,
      close: false,
      screenThree: false,
      Loading: false,

      mask: [
        [108.979348, 34.251057],
        [108.996747, 34.251121],
        [108.996722, 34.240104],
        [108.979287, 34.240161]],
      map: null,
      configIndex: '-1',

      module: {},
      show_group: false,
      allDataP: {},
      allData: {
        zero: {
          type: 0,
          title_name: '大屏标题',
          // 大标题的颜色
          title_color: 'rgba(238, 238, 238,1)',
          // 全部块级的背景颜色 
          back_color: 'rgba(100, 107, 104, .5)',
          // 下面小块的标题颜色
          small_title_color: 'rgba(248, 248, 252,1)',
          title_size: 0.8,

          small_title_size: 0.4,
          small_title_spacing: 0.04,

          title_spacing: 0.04,
          // 边框的圆角
          border_radius: 0,
          title_img: '../../static/title_01.png',
          border_style: 'DvBorderBox8', // 设置默认组件名
          dur: 5,
          // title_img: 'https://img0.baidu.com/it/u=3422287847,344441285&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720544400&t=9d931589af4173bb88ff9d0b75362462',

        },
        one: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 1,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                title: '1',
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                title: '2',
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
                // symbol 的样式  大小自定义选择
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 4.统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {
            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            // 改变头部的样式的时候  凑得html
            header_use: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(165, 58, 51,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配right置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        two: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 2,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        three: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 3,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第3列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第3列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        four: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 4,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第4列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第4列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        five: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 5,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        six: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 6,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        seven: {
          // 数据的配置内容  (选择的是哪组数据)
          data_source: {
            group_id: '',
          },
          // 接口配置的数据
          data_config: [],
          // 传值到大屏的数据格式
          back_dictionary: [],
          type: 7,
          content_title: '块级标题1',
          // 1.饼状图的数据
          pie: {
            title: '饼图标题',
            dynamicCenter: ['66%', '50%'], // 位置
            radius: ['40%', '70%'], // 内外半径
            roseType: '',
            // 图例的显示
            legend: true,
            legend_top: '2%',
            legend_left: '2%',
            legend_color: 'rgba(84, 111, 198,1)',
            direction: 'vertical',
            data_type: 1,
            data: [
              {
                value: 1048,
                name: 'Search',
                itemStyle: { color: 'rgba(84, 111, 198,1)' }
              },
              {
                value: 735, name: 'Direct',
                itemStyle: { color: 'rgba(145, 205, 118,1)' }
              },
              {
                value: 580, name: 'Email',
                itemStyle: { color: 'rgba(250, 201, 88,1)' }
              }


            ]
          },
          // 2.柱状图的数据
          columnar: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 34, 30, 30, 1)',
            yaxis_color: 'rgba( 34, 30, 30, 1)',
            // border_width: '60%',
            data_type: 1,
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            dataY: [
              {
                name: 'Direct',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 200, 334, 390, 330, 220],
                itemStyle: {
                  normal: {
                    barBorderRadius: [3, 5, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色为蓝色
                  }
                },
              },
              {
                name: 'Direct1',
                type: 'bar',
                barWidth: '26%',
                data: [10, 52, 390, 330, 220, 200, 334],
                itemStyle: {
                  normal: {
                    barBorderRadius: [0, 0, 0, 0],
                    color: 'rgba(194, 53, 43, 0.8)', // 设置柱状图的颜色
                  }
                },
              }
            ],
          },
          // 3.折线图的数据 
          fold_line: {
            grid_top: '3%',
            grid_bottom: '4%',
            grid_left: '5%',
            grid_right: '6%',
            // series_color: 'rgba(194, 53, 43, 0.8)',
            axis_color: 'rgba( 224, 191, 188, 1)',
            yaxis_color: 'rgba( 224, 191, 188, 1)',
            // border_width: '60%'
            line_style: '',
            dataX: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            // 多条折线的其他的多个样式组合   多选的组合
            style_group: [
              {
                type: 'line',
                name: '测试11',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 92, 91, 34, 29, 33, 10],
                symbol: 'none',
              },
              {
                type: 'line',
                name: '测试22',
                smooth: false,
                step: '',
                lineStyle: {
                  type: 'solid',
                  color: 'rgba(194, 53, 43, 0.8)', // 设置线的颜色
                  width: 2 // 设置线的宽度
                },
                data: [82, 33, 13, 82, 92, 90, 34],
                symbol: 'none',
              }
            ],
            // 多条折线的数据
            data_type: 1,

          },
          // 统计块的数据
          statis_data: {
            data: [
              { value: 100, name: '全部设备' },
              { value: 90, name: '在线正常' },
              { value: 5, name: '在线报警' },
              { value: 5, name: '离线设备' }
            ],
            title_color: ['rgba(88, 195, 250,1)', 'rgba(78, 246, 116,1) ', 'rgba(244, 98, 106,1)', 'rgba(111, 159, 189,1)']
          },
          // 6.表格的数据
          from_data: {

            align: ["center", "center", "center", "center", "center", "center", "center", "center"],
            header: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            header_use: [
              '左第一列',
              "设备名称",
              "报警类型",
            ],
            head_key: [],
            rabs_data: [],
            data_type: 1,
            header_size: 16,
            data: [
              ['行1列1', '行1列2', '行1列3'],
              ['行2列1', '行2列2', '行2列3'],
              ['行3列1', '行3列2', '行3列3'],
              ['行4列1', '行4列2', '行4列3'],
              ['行5列1', '行5列2', '行5列3'],
            ],
            color: '#fff',
            headerBGC: "rgba(17, 56, 124,1)",
            headerC: "rgba(178, 56, 124,1)",
            oddRowBGC: "#051c4f",
            evenRowBGC: "#0f2b4e",
            align: ['center', 'center', 'center'],
            rowNum: 5,
            // index: true,
            // indexHeader: "序号",
            columnWidth: [80, 80, 80, 80, 80], //
            carousel: "single",//page
            headerHeight: 30,
            rowHeight: 40,
            waitTime: 1000,
          },
          // 第五个的天气样式
          weatherType: 2,
          weatherBackColor: '',
          weatherColor: '#FFFFFF',
          weatherNumDay: 2,
          weatherSize: 12,
          weatherIcon: 1,
          // 第七个的视频配置
          videoURL: '', //'https://gou-bin.oss-cn-beijing.aliyuncs.com/testvideo.mp4'
          videoType: 1,
          videoGroup: 2,
          // 当前是视频组的时候,视频组存的信息  
          currentVideoGroup: [],
          videoTurnTime: 60000,
        },
        eight: {
          type: 8,
          bgcolor: '',
          mapStyle: 'darkblue',
          mapView: '3D',
          // 显示中间位置的经纬度
          // center: [108.988218, 34.246564],
          zoom: 15.6,
          showLabel: true,
          labelPosition: 'right',
          clickGo: '',
          iconStyle: "../../static/local2.png",
          markers: [
            {
              point: [108.98111, 34.249392],
              id: 130,
              name: "西二楼锅炉房"
            },
            {
              point: [108.98022, 34.248536],
              id: 101,
              name: "西二楼换热站"
            },
            {
              point: [108.98324, 34.249685],
              id: 100,
              name: "中一楼换热站"
            },
            {
              point: [108.984004, 34.247404],
              id: 194,
              name: "图书馆换热"
            },
            {
              point: [108.986193, 34.250437],
              id: 182,
              name: "东一楼换热站"
            }],
        }
      },
      // allData: {},

    };
  },

  created() {
    var that = this;
    that.getScreenConfig()
    // 显示中间的地图
    setTimeout(() => {
      that.getDataSource()
    }, 300);
    setTimeout(() => {
      that.showInitMap()
    }, 1000);

  },
  methods: {
    // 大屏的配置信息
    getScreenConfig() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/screen/detail",
        data: {
          id: 1,
        }
      }).then(res => {
        console.log('查询配置数据', res);
        if (res && res.data.result == "success") {
          that.allData = JSON.parse(res.data.data.screen_config);
          console.log('alldata', that.allData)
          setTimeout(() => {
            that.$refs.childRef1.showOption();
            that.$refs.childRef2.showOption();
            that.$refs.childRef3.showOption();
            that.$refs.childRef4.showOption();
            that.$refs.childRef5.showOption();
            that.$refs.childRef6.showOption();
            that.$refs.childRef7.showOption();
          }, 1200)
        }
      }).catch(error => {
        console.log(error);
      });
    },
    // 请求配置信息
    getDataSource() {
      var that = this;
      this.$http({
        method: "post",
        url: "api/dataSource/all",
        data: {}
      }).then(res => {
        if (res && res.data.result == "success") {
          console.log('所有数据的来源信息', res);
          that.allData.one.data_config = res.data.data
          that.allData.two.data_config = res.data.data
          that.allData.three.data_config = res.data.data
          that.allData.four.data_config = res.data.data
          that.allData.six.data_config = res.data.data
        }
      }).catch(error => {
        console.log(error);
      });
    },
    // 显示中间的信息
    showInitMap() {
      var that = this;
      this.map = new AMap.Map("mapBox", {
        // mask: that.mask,
        center: that.allData.eight.center,
        viewMode: that.allData.eight.mapView,
        // showLabel: false,
        showBuildingBlock: true,
        labelzIndex: 1,
        pitch: 40,
        resizeEnable: true,
        expandZoomRange: true,
        zoom: that.allData.eight.zoom,
        zooms: [3, 20],
        showRoad: true,
        terrain: true,
        skyColor: "#123A51",
        //features:['point','road','building'],
        layers: [
          //new AMap.TileLayer.RoadNet({
          //zIndex:20
          // }),
          // new AMap.TileLayer.Satellite()
          // new AMap.TileLayer({
          // zIndex:6,
          // opacity:1,
          // getTileUrl:'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
          // })
        ]
      });


      // this.map.setMapStyle("amap://styles/c076582da8a2694df4142e70cb3c206e");
      // this.map.setMapStyle("amap://styles/darkblue");
      this.map.setMapStyle(`amap://styles/${this.allData.eight.mapStyle}`);
      for (let i = 0; i < this.allData.eight.markers.length; i++) {
        that.addMarker(this.allData.eight.markers[i]);
      }
      setTimeout(function () {
        that.map.setFitView();
      }, 500);

    },

    //标记函数
    addMarker(oneMark) {
      var that = this;
      var marker = new AMap.Marker({
        map: that.map,
        icon: new AMap.Icon({
          size: [32, 32],//背景大小
          imageSize: [32, 32],//图标的大小
          image: that.allData.eight.iconStyle,
        }),
        position: oneMark.point,
        offset: new AMap.Pixel(-16, -32),
        label: {
          // content: oneMark.name,
          content: that.allData.eight.showLabel ? oneMark.name : '',
          offset: new AMap.Pixel(-4, -10),
          direction: that.allData.eight.labelPosition,
        }
      });

      this.map.add(marker);
    },

    // 清除所有背景有高亮
    clearHighLight() {
      this.configIndex = '-1'
      var elements = document.getElementsByClassName("high_light");
      for (var j = 0; j < elements.length; j++) {
        elements[j].classList.remove("highlighted");
      }
    },
    // 点击高亮
    highLight(i) {
      var that = this
      // console.log('iiiiiii', i)
      that.show_group = false
      that.clearHighLight()

      that.configIndex = i
      var elements = document.getElementsByClassName("high_light");
      elements[i].classList.add("highlighted");
      // console.log('这里', i)
      if (i >= 0) {
        that.show_group = true
        switch (i) {
          case 0:
            that.module = that.allData.zero
            break;
          case 1:
            that.module = that.allData.one
            break;
          case 2:
            that.module = that.allData.two
            break;
          case 3:
            that.module = that.allData.three
            break;
          case 4:
            that.module = that.allData.four
            break;
          case 5:
            that.module = that.allData.five
            break;
          case 6:
            that.module = that.allData.six
            break;
          case 7:
            that.module = that.allData.seven
            break;
          case 8:
            that.module = that.allData.eight
            break;
        }
      }
      // 不管点击哪一个   都去执行右边的凑数据函数  那边会筛选某一类型后面的执行的函数
      setTimeout(() => {
        that.$refs.rightRef.getColumnData()
      }, 300);
    },
    // 子传父触发
    changeTitle() {
      console.log('父组件的改变')
    },
    changeType() {
      // console.log('传过来的this.module', this.module)
      var that = this
      // 当前改的是哪一个框框
      console.log('子传父类型', that.configIndex)
      switch (that.configIndex) {
        case 0:
          this.allData.zero = this.module
          break;
        case 1:
          // console.log('第一块', this.module, this.allData)
          this.allData.one = this.module
          setTimeout(() => {
            that.$refs.childRef1.showOption();
          }, 200);

          break;
        case 2:
          // console.log('第二块')
          this.allData.two = this.module
          setTimeout(() => {
            that.$refs.childRef2.showOption();
          }, 200);
          break;
        case 3:
          // console.log('第三块')
          this.allData.three = this.module
          setTimeout(() => {
            that.$refs.childRef3.showOption();
          }, 200);
          break;
        case 4:
          // console.log('第四块')
          this.allData.four = this.module
          setTimeout(() => {
            that.$refs.childRef4.showOption();
          }, 200);
          break;
        case 5:
          // console.log('第五个')
          this.allData.five = this.module
          setTimeout(() => {
            that.$refs.childRef5.showOption();
          }, 200);
          break;
        case 6:
          // console.log('第六个')
          this.allData.six = this.module
          setTimeout(() => {
            that.$refs.childRef6.showOption();
          }, 200);
          break;
        case 7:
          // console.log('第七个')
          this.allData.seven = this.module
          setTimeout(() => {
            that.$refs.childRef7.showOption();
          }, 200);
          break;
        case 8:
          //  地图的改变
          this.allData.eight = this.module
          setTimeout(() => {
            that.showInitMap()
          }, 200);
          break;
      }
    },
    // 返回
    goBack() {
      this.$router.push({
        path: '/device',
        name: 'device',
        component: 'device'
      })
      localStorage.setItem("indexPath", '7-1');
    },
    // 预览配置
    previewConfig() {
      var that = this;
      this.previewVisible = true
      // 要把alldata处理下
      this.allDataP = that.allData
      this.changeScreen()
      setTimeout(() => { that.$refs.childPre.getScreenConfigY(); }, 800)

      // 预览内容弹窗


    },
    // 关闭预览
    closeVisible() {
      this.previewVisible = false
      this.changeScreen()
    },
    changeScreen() {
      // console.log('6666  切换了')
      var content = document.documentElement;
      if (!this.screenThree) {
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen && content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        this.screenThree = true;
      } else {
        (document.exitFullscreen && document.exitFullscreen()) ||
          (document.mozCancelFullScreen && document.mozCancelFullScreen()) ||
          (document.webkitExitFullscreen && document.webkitExitFullscreen()) ||
          (document.msExitFullscreen && document.msExitFullscreen());
        this.screenThree = false;
      }
    },

    // 保存配置
    saveConfig() {
      var that = this;
      that.Loading = true
      console.log('需要保存的数据', that.allData)
      this.$http({
        method: "post",
        url: "api/screen/update",
        data: {
          id: 1,
          screen_name: '测试大屏',
          screen_config: JSON.stringify(that.allData)
        }
      }).then(res => {
        // console.log('修改配置数据', res);
        if (res && res.data.result == "success") {
          this.$message({
            message: '配置保存成功!',
            type: 'success',
            center: true
          });
          that.Loading = false;
          // setTimeout(() => { that.$router.push('/largeScreen') }, 300)
        }
      }).catch(error => {
        console.log(error);
        that.Loading = false;
      });
    }

  }
};
</script>

<style scoped>
.page {
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  /* box-sizing: border-box; */
  font-size: 0.62rem;
  color: #eee;
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 5px;
}

.left {
  grid-column: 1/20 !important;
  grid-row: 1/25 !important;
  width: 100%;
  height: 100%;
  /* aspect-ratio: 10 / 7 !important; 设置宽高比为10:7，即宽度的70% */
  background-color: #fff;
  /* 背景色，以便于查看效果 */
  /* 里面放置大屏 */
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 5px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  font-size: 0.45rem;
}

.right {
  grid-column: 20/25;
  grid-row: 1/25;
  background-color: rgba(100, 107, 104, .5);
  padding: 0 3%;
  padding-top: .6rem;
  font-size: .45rem;
  overflow-y: auto;
}

.titleName {
  display: inline-block;
  width: 50%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  /* top: .2rem; */
  z-index: 2;
  transform: translateX(-50%);
  height: 1rem;
  line-height: 1rem;
  /* font-size: 0.8rem; */
  font-weight: 700;
  /* letter-spacing: 0.04rem; */
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 1) !important;
  /* border: 1px solid red; */
}

/* 高亮显示的样式 */
.highlighted {
  box-shadow: inset 0 0 40px rgba(36, 13, 244, 0.7) !important;
}

.high_light:hover {
  box-shadow: inset 0 0 25px rgba(106, 197, 111, 0.7);
  cursor: pointer;
}

/* 左边的预览里面的内容 */
.high_light {
  position: relative;
  /* background-color: var(--custom-bg-color) !important; */
  /* background-color: rgba(40, 222, 131, 0.5); */
  z-index: 5;
}

/* 边框的层级高一点  让显示在内容的上面 */
.high_light>>>.dv-border-svg-container {
  z-index: 99 !important;
}

.high_light>>>.dv-border-box-1 .border {
  z-index: 9 !important;
}

.zero {

  grid-column: 1/25;
  grid-row: 1/3;
  /* background-color: rgba(100, 107, 104, .5); */
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;

  /* background-image: url("../../static/title_01.png"); */
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}



.one {
  grid-column: 1/7;
  grid-row: 3/9;
}

.two {
  grid-column: 1/7;
  grid-row: 9/17;
}

.three {
  grid-column: 1/7;
  grid-row: 17/25;
}

.four {
  grid-column: 7/19;
  grid-row: 18/25;
}

.five {
  grid-column: 19/25;
  grid-row: 17/25;
}

.six {
  grid-column: 19/25;
  grid-row: 9/17;
}

.seven {
  grid-column: 19/25;
  grid-row: 3/9;
}

.eight {
  /* grid-column: 7/19;
  grid-row: 3/19; */
  grid-column: 1/25;
  grid-row: 1/25;
  /* border: 1px solid red; */
  font-size: .36rem;
  color: black !important;
  z-index: 4;
}

.every_content_title {
  position: absolute;
  top: 0;
  padding-left: 3%;
  width: 100%;

  height: 0.6rem;
  line-height: 0.6rem;
  color: #fff;
  /* border: 1px solid red; */
  font-size: 0.36rem;
  font-weight: bold;
  text-align: left;
  z-index: 99;
  /* border: 1px solid #11578d; */
  /* border: 1px solid #0c1519; */
  /* cursor: pointer; */
  user-select: none;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  transition: transform 0.3s ease-in-out;

  /* background-color: #5bbd92 !important; */

}

.every_content_title>div:nth-child(1) {
  width: 0.05rem;
  height: 60%;
  background-color: #5bbd92;
  margin-right: 0.1rem;
  border-radius: 0.7rem;
}


.content_data {
  width: 100% !important;
  height: calc(100% - 0.6rem) !important;
  position: absolute;
  top: 0.6rem;
  overflow: hidden !important;
  /* border: 1px solid blue; */
}


.inpu {
  /* vertical-align: middle; */
  width: 4.2rem;
  font-size: 0.45rem;
  margin-right: 0.3rem;
}

.inpu2 {
  /* vertical-align: middle; */
  width: 4.2rem;
  font-size: 0.45rem;
  margin-right: 0.3rem;
}

.preview_visible {
  height: 100% !important;

}

.preview_visible>>>.el-dialog {
  height: 100% !important;
  margin: 0 !important;
}

.preview_visible>>>.el-dialog__header,
.preview_visible>>>.el-dialog__body {
  padding: 0 !important;
}

.btn_group {
  /* border: 1px solid red; */
  position: absolute !important;
  top: 10px;
  width: 97%;
  right: 1.5%;
  display: flex;
  justify-content: space-around;
}
</style>
